<template >
  <div class="maintenance-container-r">
    <h3 class="childpage-title">维保任务列表</h3>
    <ul class="maintenance-items">
      <li v-for="(item,index) in items" :key="index">
        <div class="icon-logo">
          <img src="../../../assets/images/homeLeft/icon-dan.png" v-show="item.maintainType==3" alt />
          <img src="../../../assets/images/homeLeft/icon-connect.png" alt v-show="item.maintainType==4" />
          <img src="../../../assets/images/homeLeft/icon-maintenance.png" alt v-show="item.maintainType==1" />
          <img src="../../../assets/images/homeLeft/icon-maintain.png" alt v-show="item.maintainType==2" />
        </div>
        <div>
          <p>{{item.orgName}}</p>
          <p class="item-text">{{item.name}}</p>
          <div>
            <el-progress :percentage="Number(item.percent)" v-if="item.percent">

            </el-progress>
            <div style="width:6px;height:6px;border-radius:50%;background-color:#4da2fc;position:absolute;bottom:4px;left:0;" v-show="item.percent==='0'"></div>
          </div>
        </div>
      </li>
    </ul>
    <!-- 详情按钮 -->
    <el-tooltip v-show="!$Ctl.isCs(true)" class="item" effect="dark" content="查看时间线">
      <div class="jump-timeline-btn" @click="$Ctl.enterDetail('MaintenanceTimeLine',{orgId: orgIds})"></div>
    </el-tooltip>
  </div>
</template>
<script>
import { getMaintainTaskListForScreen } from '@/api/maintenance'
import getNowFormatDate from '@/utils/today'
export default {
  data() {
    return {
      orgIds: '',
      childSelectValue: -1,
      items: [],
    }
  },
  props: {
    parames: {
      required: true,
    },
  },
  created() {
    if (typeof this.parames.orgIds === 'string') {
      this.orgIds = -1
    } else {
      this.orgIds = this.parames.orgIds
    }
    window.FunList.changeRightModel_MaintainRight = this.changeModel
  },
  mounted() {
    //this.getMaintainData();
  },
  methods: {
    changeModel(parames) {
      if (parames != undefined) {
        this.orgIds = parames.obj[0].orgIds
        this.childSelectValue = parames.obj[1].fbsId
        this.getMaintainData()
      }
    },
    getMaintainData() {
      let param = {
        orgIds: this.orgIds,
        time: getNowFormatDate.getNowFormatDate(),
        fbsId: this.childSelectValue || -1,
      }
      // TODO 避免重复请求
      if (this.paramStr === JSON.stringify(param)) return
      this.$Ctl.loading(1, 10000)
      getMaintainTaskListForScreen(param).then((res) => {
        if (res.status == 200) {
          this.paramStr = JSON.stringify(param)
          this.$Ctl.loading(0)
          this.items = res.data
        }
      })
    },
  },
}
</script>
<style lang="scss" >
.maintenance-container-r {
  position: relative;
  height: 100%;
  h3 {
    margin: 10px 0 20px;
  }
  .maintenance-items {
    height: 100%;
    overflow: auto;
    padding-bottom: 60px;
    li {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #ffffff;
      font-size: 16px;
      margin-bottom: 42px;
      div {
        &:nth-child(2) {
          flex: 1;
          position: relative;
        }
      }
      .icon-logo {
        margin-right: 20px;
      }
      .item-text {
        color: #a3bedd;
        margin: 5px 0 10px 0;
      }
      .el-progress__text {
        color: #4da2fc;
      }
    }
  }
  .jump-timeline-btn {
    position: absolute;
    bottom: 50px;
    left: -100px;
    width: 80px;
    height: 60px;
    background: url(../../../assets/images/cards/timeline-btn.png) center center no-repeat;
    background-size: contain;
    cursor: pointer;
    &:hover {
      background: url(../../../assets/images/cards/timeline-btn-hover.png) center center no-repeat;
      background-size: contain;
    }
  }
}
</style>